<script setup>
import {
    Management,
    Promotion,
    UserFilled,
    User,
    Crop,
    EditPen,
    SwitchButton,
    CaretBottom
} from '@element-plus/icons-vue'

import { useRouter } from 'vue-router';
import { ref, onMounted, onUpdated } from "vue";

const router = useRouter();
// 处理下拉菜单项的点击事件
const handleCommand = (command) => {
  if (command === 'login') {
    router.push('/admin/Login'); // 跳转到管理员登录页面
  }
};

// 获取当前时间
const currentTime = ref('');

// 方法：更新当前时间
const updateTime = () => {
  const now = new Date();
  const formattedTime = now.toLocaleString(); // 格式化为本地时间字符串
  currentTime.value = formattedTime;
};

// 挂载时更新时间，并每秒更新
onMounted(() => {
  updateTime();
  setInterval(updateTime, 1000);
});

</script>

<template>
    <el-container class="layout-container">
        <el-header class="main-header">
            <div class="header-content">
                <div class="logo">智慧农业创新实验室</div>
                <el-menu 
                    mode="horizontal" 
                    class="main-menu"
                    active-text-color="#ffd04b" 
                    :background-color="'transparent'"
                    text-color="#fff"
                    router>
                    <el-menu-item index="/user/index/main">
                        <span>首页</span>
                    </el-menu-item>
                    <el-menu-item index="/user/news">
                        <span>党建新闻动态</span>
                    </el-menu-item>
                    <el-sub-menu>
                        <template #title>实验室成员</template>
                        <el-menu-item index="/user/teachers">教师</el-menu-item>
                        <el-menu-item index="/user/students">学生</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/user/honors">
                        <span>实验室荣誉</span>
                    </el-menu-item>
                    <el-menu-item index="/user/papers">
                        <span>学术论文</span>
                    </el-menu-item>
                    <el-menu-item index="/user/projects">
                        <span>科研项目</span>
                    </el-menu-item>
                    <!-- <el-menu-item index="/user/party">
                        <span>党建</span>
                    </el-menu-item> -->
                    <el-menu-item index="/user/about">
                        <span>关于我们</span>
                    </el-menu-item>
                </el-menu>
                <div class="header-right">
                    <span class="time">{{ currentTime }}</span>
                    <el-dropdown placement="bottom-end" @command="handleCommand">
                        <span class="el-dropdown__box">
                            管理端入口
                            <el-icon><CaretBottom /></el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="login">管理员登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>
        
        <el-main>
            <router-view></router-view>
        </el-main>
        
        <el-footer>智慧农业创新实验室 ©2025 Created by HYH</el-footer>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    .main-header {
        min-width: 1400px;
        padding: 0;
        background: linear-gradient(to right, 
            #531d8c 0%,
            #531d8c 15%,
            #21268f 50%,
            #a7b930 85%,
            #a7b930 100%
        );
        background-size: 100% 100%;
        background-repeat: no-repeat;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        width: 100%;
        position: relative;
        
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: inherit;
            z-index: -1;
        }
        
        .header-content {
            width: 85%;
            min-width: 1400px;
            max-width: none;
            margin: 0 auto;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            box-sizing: border-box;
            background: transparent;
        }

        .logo {
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            padding: 0 20px;
            white-space: nowrap;
        }

        .main-menu {
            border: none;
            flex: 1;
            display: flex;
            justify-content: center;
            margin: 0 20px;
            background-color: transparent !important;
            
            :deep(.el-menu-item) {
                height: 60px;
                line-height: 60px;
                padding: 0 16px;
                min-width: 80px;
                font-size: 15px;
                white-space: nowrap;
                
                &:hover {
                    background-color: rgba(255, 255, 255, 0.15);
                    transition: background-color 0.3s;
                }
            }
            
            :deep(.el-sub-menu__title) {
                height: 60px;
                line-height: 60px;
                padding: 0 16px;
                font-size: 15px;
                white-space: nowrap;
                
                &:hover {
                    background-color: rgba(255, 255, 255, 0.15) !important;
                    transition: background-color 0.3s;
                }
            }

            :deep(.el-sub-menu) {
                min-width: 80px;

                .el-menu--popup {
                    background: linear-gradient(to bottom, #531d8c, #21268f) !important;
                    
                    .el-menu-item {
                        background-color: #21268f;
                        
                        &:hover {
                            background-color: rgba(255, 255, 255, 0.15) !important;
                        }
                    }
                }
            }
        }

        .header-right {
            display: flex;
            align-items: center;
            color: #fff;
            white-space: nowrap;
            
            .time {
                margin-right: 20px;
            }
            
            .el-dropdown__box {
                color: #fff;
                cursor: pointer;
                display: flex;
                align-items: center;
                gap: 4px;
                padding: 0 10px;
            }
        }
    }

    .el-main {
        flex: 1;
        padding: 20px;
        width: 85%;  // 从1200px改为85%
        min-width: 1400px;  // 设置最小宽度
        margin: 0 auto;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .el-footer {
        min-width: 1400px;
        text-align: center;
        padding: 20px;
        background-color: #f5f5f5;
        color: #666;
    }
}

// 使用 :global 选择器
:global(.el-menu--popup) {
  background: linear-gradient(to right, #531d8c, #21268f) !important;
  
  .el-menu-item {
    background-color: transparent !important;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.15) !important;
    }
  }
}
</style>